<template>
  <div class="dashboard-container">
    <h1 style="text-align: center; margin-bottom: 40px; font-size: 35px; color: #486180">入住记录</h1>

    <div style="display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; margin-bottom: 30px;">
      <el-input
        v-model="customerName"
        placeholder="顾客名称"
        name="customerName"
        type="text"
        clearable
        style="width: 180px;"
      />
      <el-input
        v-model="roomNumber"
        placeholder="房间号码"
        name="roomNumber"
        type="text"
        clearable
        style="width: 180px;"
      />
      <el-input
        v-model="identificationCard"
        placeholder="身份证号"
        name="identificationCard"
        type="text"
        clearable
        style="width: 180px;"
      />
      <el-button type="primary" plain style="width: 80px;" @click="selectLiveRecords">查询</el-button>
      <el-button style="width: 80px;" @click="checkLiveRecords">重置</el-button>
    </div>
    <el-table :data="liveRecordsList" height="659px" border style="width: 100%; margin-top: 20px">
      <el-table-column align="center" fixed prop="liveId" label="订单ID" />
      <el-table-column align="center" fixed prop="customerId" label="顾客ID" />
      <el-table-column align="center" fixed prop="customerName" label="顾客名称" />
      <el-table-column align="center" fixed prop="identificationCard" label="身份证号" />
      <el-table-column align="center" fixed prop="roomId" label="房间ID" />
      <el-table-column align="center" fixed prop="roomNumber" label="房间号码" />
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { deleteLiveRecords, insertLiveRecords, selectAllLiveRecords, updateLiveRecords } from '@/api/liveRecords'

export default {
  name: 'UserLiveRecords',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  data() {
    return {
      customerName: '',
      roomNumber: '',
      identificationCard: '',
      liveRecordsList: []
    }
  },
  mounted() {
    this.selectLiveRecords()
  },
  methods: {
    selectLiveRecords() {
      selectAllLiveRecords({
        customerName: this.customerName,
        roomNumber: this.roomNumber,
        identificationCard: this.identificationCard
      }).then(response => {
        console.log(response.data)
        this.liveRecordsList = response.data
      }).catch(error => {
        console.error('查询入住记录失败:', error)
      })
    },

    checkLiveRecords() {
      this.customerName = ''
      this.roomNumber = ''
      this.identificationCard = ''
      this.selectLiveRecords()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  margin: 30px;
}

.dashboard-text {
  font-size: 30px;
  line-height: 46px;
}
</style>
